@use "variables" as *;

/**
 * 侧滑导航
 * -------------------------------------------------------------
 * 对已有的样式，做最后的调整，覆盖一些不满意的设计
 *
 * 虽然叫 main.scss，实际应该最后载入
 */
#app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}


/*
 * 数据字典样式
 * ----------------------
 * 因为与后台数据联动，如果需要调整，只能修改内容，而不允许修改名称
 */
.dictionary {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: $sea-color-white;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 10px;
}


.dic-primary {
    color: $sea-color-white;
    background-color: $sea-color-primary;
}

.dic-fatal {
    color: $sea-color-white;
    background-color: $sea-color-gray;
}

.dic-success {
    color: $sea-color-white;
    background-color: $sea-color-success;
}

.dic-danger {
    color: $sea-color-white;
    background-color: $sea-color-danger;
}

.dic-warning {
    color: $sea-color-white;
    background-color: $sea-color-warning;
}


/** 界面隐藏默认的输入框 */
.vue-devtools__panel {
    display: none !important;
}

/**
 * el-drawer 样式调整
 * ----------------------
 * 取消非常夸张的边框设计，使样式更像低版本的抽屉
 */
.el-drawer__header {
    font-weight: bold;
    margin: 0 !important;
    border-bottom: $sea-border;
    padding: $sea-padding-large !important;
}

.el-drawer__body {
    padding: $sea-padding-large;
}

/**
 * el-dialog 样式调整
 * ----------------------
 * 取消非常夸张的边框设计，使样式更像低版本的弹窗
 */
.el-dialog__header {
    margin: 0 !important;
    border-bottom: $sea-border;
    padding: $sea-padding-larger !important;
}

.el-dialog__body {
    padding: $sea-padding-larger;
}


/**
 * 代码编辑器兼容样式
 * -------------------------------------------------------
 * 相关组件 code-editor-props.vue
 * 基于 codemirror 的代码编辑器，字体需要与环境适配
 */
.cm-editor {
    font-size: $sea-font-size-base;
    font-family: $sea-font-family;

    .cm-line {
        font-size: $sea-font-size-base;
        font-family: $sea-font-family;
    }
}

/**
 * 代码编辑器兼容样式
 * -------------------------------------------------------
 * 基于 high-light.js 的代码高亮面板，字体需要与环境适配
 */
.hljs-with-lines {
    position: relative;
    //background: #f6f8fa;
    /* 匹配 GitHub 主题背景 */
    padding: 1em;
    border-radius: 4px;
}

.line-number-container {
    display: flex;
    margin-bottom: 0.2em;
}

.line-number {
    color: #999;
    width: 2.5em;
    text-align: right;
    padding-right: 0.5em;
    user-select: none;
}

.line-content {
    margin: 0;
    white-space: pre-wrap;
}

// 一个特殊的样式，平时隐藏边框，鼠标悬浮、聚焦的时候，重新展示边框
.el-input  {
    &.no-border {
        --el-input-border: none;
        --el-input-border-color: transparent;
    }
}